<template>
	<div class="MagicImg">
		<div class="Magic-style" v-if="modelData.imgStyle !== 5">
			<view
				class="image-li"
				v-for="(item, index) in modelData.imagesList"
				:key="index"
				:style="{
					width: 100 / modelData.imgStyle + '%',
					paddingBottom: modelData.paddingTB + 'px',
					paddingTop: modelData.paddingTB + 'px',
					paddingLeft: (index === 0 ? 0 : modelData.paddingLR / 2) + 'px',
					paddingRight: (index === modelData.imagesList.length - 1 ? 0 : modelData.paddingLR) / 2 + 'px'
				}"
				@click="navTo(item.url, item.switchTab)"
			>
				<image
					:src="item.image.url"
					class="banner-img"
					:class="[modelData.imagesList.length === 1 ? 'one-img' : '']"
					:mode="modelData.imagesList.length === 1 ? 'widthFix' : 'aspectFill'"
				></image>
			</view>
		</div>
		<div v-if="modelData.imgStyle === 5">
			<!--    单张图-->
			<image
				v-if="modelData.imagesList.length === 1"
				:src="modelData.imagesList[0].image.url"
				class="banner-img one-img"
				mode="widthFix"
				@click="navTo(modelData.imagesList[0].url, modelData.imagesList[0].switchTab)"
			></image>
			<!--    两张-->
			<div
				v-if="modelData.imagesList.length === 2"
				class="Magic-view"
				:style="{ paddingBottom: modelData.paddingTB * 2 + 'rpx', paddingTop: modelData.paddingTB * 2 + 'rpx' }"
			>
				<image
					v-for="(item, index) in modelData.imagesList"
					:key="index"
					:src="item.image.url"
					class="two-img"
					mode="aspectFill"
					@click="navTo(item.url, item.switchTab)"
					:style="{ paddingRight: (index === 0 ? modelData.paddingLR : 0) + 'rpx', paddingLeft: (index === 1 ? modelData.paddingLR : 0) + 'rpx' }"
				></image>
			</div>
			<!-- 三张 -->
			<div
				v-if="modelData.imagesList.length === 3"
				class="Magic-view"
				:style="{ paddingBottom: modelData.paddingTB * 2 + 'rpx', paddingTop: modelData.paddingTB * 2 + 'rpx' }"
			>
				<image
					:src="modelData.imagesList[0].image.url"
					class="tree-big-img"
					mode="aspectFill"
					:style="{ paddingRight: modelData.paddingLR * 2 + 'rpx' }"
					@click="navTo(modelData.imagesList[0].url, modelData.imagesList[0].switchTab)"
				></image>
				<div class="tree-small-view">
					<image
						:src="modelData.imagesList[1].image.url"
						class="tree-small-img"
						mode="aspectFill"
						:style="{ paddingBottom: modelData.paddingTB + 'rpx' }"
						@click="navTo(modelData.imagesList[1].url, modelData.imagesList[1].switchTab)"
					></image>
					<image
						:src="modelData.imagesList[2].image.url"
						class="tree-small-img"
						mode="aspectFill"
						:style="{ paddingTop: modelData.paddingTB + 'rpx' }"
						@click="navTo(modelData.imagesList[2].url, modelData.imagesList[2].switchTab)"
					></image>
				</div>
			</div>
			<!-- 四张 -->
			<div
				v-if="modelData.imagesList.length === 4"
				class="Magic-view"
				:style="{ paddingBottom: modelData.paddingTB * 2 + 'rpx', paddingTop: modelData.paddingTB * 2 + 'rpx' }"
			>
				<image
					:src="modelData.imagesList[0].image.url"
					class="tree-big-img"
					mode="aspectFill"
					:style="{ paddingRight: modelData.paddingLR * 2 + 'rpx' }"
					@click="navTo(modelData.imagesList[0].url, modelData.imagesList[0].switchTab)"
				></image>
				<div class="tree-small-view">
					<image
						:src="modelData.imagesList[1].image.url"
						class="tree-small-img"
						mode="aspectFill"
						:style="{ paddingBottom: modelData.paddingTB + 'rpx', height: 120 - modelData.paddingTB / 2 + 'rpx' }"
						@click="navTo(modelData.imagesList[1].url, modelData.imagesList[1].switchTab)"
					></image>
					<div class="four-small-view" :style="{ paddingTop: modelData.paddingTB + 'rpx' }">
						<image
							:src="modelData.imagesList[2].image.url"
							class="four-small-img"
							mode="aspectFill"
							:style="{ paddingRight: modelData.paddingLR + 'rpx', height: 120 - modelData.paddingTB / 2 + 'rpx' }"
							@click="navTo(modelData.imagesList[2].url, modelData.imagesList[2].switchTab)"
						></image>
						<image
							:src="modelData.imagesList[3].image.url"
							class="four-small-img"
							mode="aspectFill"
							:style="{ paddingLeft: modelData.paddingLR + 'rpx', height: 120 - modelData.paddingTB / 2 + 'rpx' }"
							@click="navTo(modelData.imagesList[3].url, modelData.imagesList[3].switchTab)"
						></image>
					</div>
				</div>
			</div>
		</div>
		<NoLoginTip @cancel="cancelTip" :show="loginTip" v-if="loginTip" />
	</div>
</template>

<script>
import NoLoginTip from '../../NoLoginTip.vue';
export default {
	name: 'MagicImg',
	components: {
		NoLoginTip
	},
	props: {
		modelData: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			loginTip: false
		};
	},
	methods: {
		cancelTip() {
			this.loginTip = false;
		},
		navTo(url, switchTab) {
			if (!this.$common.isLogin()) {
				this.loginTip = true;
			} else {
				this.goPage(url, switchTab);
			}
		}
	}
};
</script>

<style lang="scss">
.MagicImg {
	margin: 0 auto;
	width: 720upx;
}

.two-img {
	width: 50%;
	height: 240upx;
}
.tree-big-img {
	width: 50%;
	height: 240upx;
	display: block;
}
.tree-small-view {
	width: 50%;
}
.tree-small-img {
	width: 100%;
	height: 120upx;
	display: block;
}
.four-small-view {
	width: 100%;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
}
.four-small-img {
	width: 50%;
	height: 120upx;
}
.Magic-view {
	display: -webkit-flex;
	display: flex;
	width: 100%;
	justify-content: space-between;
	flex-wrap: nowrap;
}
.Magic-style {
	display: -webkit-flex;
	display: flex;
	width: 100%;
	justify-content: space-between;
	flex-wrap: nowrap;
}
.banner-img {
	width: 100%;
	height: 172upx;
	display: block;
	border-radius: 10rpx;
}
.one-img {
	height: auto;
}
</style>
